<template>
    <div class="person">
        <h2>姓名: {{name}}</h2>
        <h2 class="age">年龄: {{age}}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge" >修改年龄</button>
        <button class="tel" @click="showTel">查看联系方式</button>
    </div>
</template>
<script lang="ts">
  export default{
    name: 'Person',
    data() {
      return{
        name: '张三',
        age: 18,
        tel: '13888888888'
      }
    },
    methods: {
        showTel(){
            alert(this.tel)
        },
        changeName(){
            this.name = 'zhang-san'
        },
        changeAge(){
            this.age += 1
        }
    }
  }
</script>
<style scoped>
.tel{
    cursor: pointer;
}
button{
    margin-right: 10px;
    cursor: pointer;
}
</style>